import 'package:flutter/material.dart';
import 'package:get/get.dart';

import '../../../utils/xh_styles.dart';
import '../../../utils/xin_he_image.dart';
import 'xin_he_nearby_shop_logic.dart';

class XinHeNearbyShopPage extends StatelessWidget {
  XinHeNearbyShopPage({Key? key}) : super(key: key);

  final logic = Get.put(XinHeNearbyShopLogic());
  final state = Get.find<XinHeNearbyShopLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // backgroundColor: Colors.white,
      appBar: AppBar(
        leading: IconButton(
            onPressed: (){
              Get.back();
            },
            icon: Container(
              padding: const EdgeInsets.only(left: 7),
              alignment: Alignment.centerLeft,
              child: const XinHeAssetImage(
                'assets/images/home/app_back_3.png',
                width: 9.5,
                height: 17,
                fit: BoxFit.cover,),
            )
        ),
        backgroundColor: Colors.white,
        shadowColor: Colors.transparent,
        title: Text('附近门店',style: TextStyle(color:XinHeColor('##222222'),fontSize: 17,fontWeight: FontWeight.w600)),
        centerTitle: true,
      ),
      body: Obx(() => Column(
        // padding: EdgeInsets.zero,
        mainAxisAlignment: MainAxisAlignment.start,
        children: [

          ///search
          Container(
            padding: EdgeInsets.only(left: 15,right: 15,top: 10,bottom: 12),
            height: 35+22,
            color: Colors.white,
            child: Container(
                width: Get.width - 30,
                decoration: BoxDecoration(color: XinHeColor('#F0F7F8'),borderRadius: BorderRadius.circular(17.5)),
                alignment: Alignment.center,
                child:Row(children: [
                  const Padding(
                    padding: EdgeInsets.only(left: 10,right: 5),
                    child: XinHeAssetImage('assets/images/home/search_12.png',width: 12,height: 12,fit: BoxFit.fill,),
                  ),

                  Expanded(
                    child: TextField(
                      controller: logic.editingController,
                      onChanged: (value){
                        logic.inputChange(value);
                      },
                      onSubmitted: (value){
                        logic.onInputSubmitAction();
                      },

                      onEditingComplete: logic.onInputEditCompleteAction,
                      maxLines: 1,
                      // maxLength: 15,
                      style:   TextStyle(fontSize: 14,color: XinHeColor('#15161F')),
                      decoration:  InputDecoration(
                          hintText:  '请输入关键字搜索',
                          hintStyle: TextStyle(fontSize: 14,color: XinHeColor('#B1B1B1') ),
                          filled: true,
                          fillColor:  XinHeColor('#F7F8F9'),
                          border: const OutlineInputBorder(
                            // borderRadius: BorderRadius.all(Radius.circular(8)),
                            borderSide:  BorderSide(color: Colors.transparent),
                          ),
                          enabledBorder:  const OutlineInputBorder(
                            // borderRadius: BorderRadius.all(Radius.circular(8)),
                            borderSide:  BorderSide(color: Colors.transparent),
                          ),
                          focusedBorder:  const OutlineInputBorder(
                            // borderRadius: BorderRadius.all(Radius.circular(8)),
                            borderSide:  BorderSide(color: Colors.transparent),
                          ),
                          disabledBorder:  const OutlineInputBorder(
                            // borderRadius: BorderRadius.all(Radius.circular(8)),
                            borderSide:  BorderSide(color: Colors.transparent),
                          ),
                          contentPadding: const EdgeInsets.only(top: 0,bottom: 0,left: 0,right: 15)
                      ),
                      // inputFormatters: [LengthLimitingTextInputFormatter(15)],
                    ),
                  ),

                  ///一键清除文本
                  state.isShowDelete.value
                      ? GestureDetector(
                    onTap: (){
                      logic.clearInputContent();
                    },
                    child: Container(
                      // padding: EdgeInsets.all(3),
                      margin: const EdgeInsets.only(left: 8),
                      height: 20,
                      width: 20,
                      child: const XinHeAssetImage('assets/images/home/input_delete.png',width: 20,height: 20,fit: BoxFit.fill,),

                    ),
                  )
                      :Container(),

                  GestureDetector(
                    onTap: (){
                      logic.onInputEditCompleteAction();
                    },
                    child: Container(
                      width: 54,
                      height: 33,
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(16.5),
                      ),
                      child:  Text('搜索',style: TextStyle(color: XinHeStyle.mainGreenColor,fontSize: 14,fontWeight: FontWeight.w500),),
                    ),
                  ),
                ],)
              // Text('请输入商品名',style: TextStyle(color: XinHeColor('#C3C3C3'),fontSize: 13),)
            ),

          ),

          state.isShowResultPage.value
              ?Expanded(child: _itemListView())
              :Container()

        ],)),
    );
  }
  
  Widget _itemListView() {
    return ListView.builder(
      itemCount: 10,
        itemBuilder: (ctx,index){
      return  Container(
        height: 80+15,
        child:  Column(children: [
          const SizedBox(height: 15,),
          Stack(children: [
            Container(
              height: 80,
              padding: const EdgeInsets.symmetric(horizontal: 15),
              margin: const EdgeInsets.symmetric(horizontal: 15),
              decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(10)),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const SizedBox(height: 8,),
                  Container(
                      height: 23,
                      alignment: Alignment.centerLeft,
                      child: Text('宝龙大厦',style: TextStyle(color: XinHeStyle.mainBalckFontColor,fontSize: 14,fontWeight: FontWeight.w600))
                  ),
                  SizedBox(height: 5,),
                  Row(children: [
                    XinHeAssetImage('assets/images/cart/nearby_icon.png',width: 12,height: 15,),
                    SizedBox(width: 5,),
                    Expanded(
                      child: Text('广东省深圳市龙华大浪道深圳市龙华大浪道区宝深圳市龙华大浪道区宝深圳市龙华大浪道区宝深圳市龙华大浪道区宝深圳市龙华大浪道区宝深圳市龙华大浪道区宝深圳市龙华大浪道区宝区宝龙',
                        maxLines: 2,
                        overflow: TextOverflow.ellipsis,
                        style: TextStyle(color: XinHeColor('#BBBBBB'),fontSize: 12,fontWeight: FontWeight.w500),),
                    ),
                    Container(
                        width: 60,
                        alignment: Alignment.centerRight,
                        child: Text('1012.6km',style:TextStyle(color: XinHeColor('#959494'),fontSize: 12,fontWeight: FontWeight.w500) ,))
                  ],),
                  SizedBox(height: 8,)
                ],),
            ),
            Positioned(
              top: 0,
              right: 015,
              child: Container(
                height: 20,
                width: 65,
                decoration: BoxDecoration(color: XinHeStyle.mainGreenColor,borderRadius: BorderRadius.only(bottomLeft: Radius.circular(10))),
                alignment: Alignment.center,
                child: Text('当前选择',style: TextStyle(color: Colors.white,fontSize: 12),),),
            )
            
          ],),
        ],),);
    });
  }
  
}
